<template>
    <div class="app-container">
      <el-card class="card">
      <el-container>
      <el-header>
        <el-row>
          <el-col :push="8">{{ this.billDetail.billDate }}电费账单详情</el-col>
          <el-col :span="12">上期示数:{{ this.billDetail.lastUsage }}</el-col>
          <el-col :span="12">本期示数:{{ this.billDetail.nowUsage }}</el-col>
          </el-row>
      </el-header>
      <el-container>
      <el-main>
        <el-row>
          <el-col :span="8">档位</el-col>
          <el-col :span="8">金额</el-col>
          <el-col :span="8">用电量</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">第一档</el-col>
          <el-col :span="8">{{ this.firstAmount.toFixed(2) }}</el-col>
          <el-col :span="8">{{ this.firstUsage }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">第二档</el-col>
          <el-col :span="8">{{  this.secondAmount.toFixed(2)  }}</el-col>
          <el-col :span="8">{{ this.secondUsage }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">第三档</el-col>
          <el-col :span="8">{{ this.thirdAmount.toFixed(2) }}</el-col>
          <el-col :span="8">{{ this.thirdUsage }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">合计</el-col>
          <el-col :span="8">{{this.totalAmount.toFixed(2) }}</el-col>
          <el-col :span="8">{{ this.Usage }}</el-col>
        </el-row> 
        <el-row>

  <el-col :span="6" :push="18">
    <el-button type="danger" @click="payMoney">未支付</el-button>
  </el-col>
</el-row>
      </el-main>
      <el-aside width="200px">
        <el-row>
          <el-col :span="24">第一档：180度 0.56元/度</el-col>
          <el-col :span="24">第二档：180-260度 0.61元/度</el-col>
          <el-col :span="24">第三档：260度 0.86元/度</el-col>
        </el-row>
      </el-aside> 
    </el-container>
      </el-container>
    </el-card>

    </div>
    
  </template>
  
  <script>
  import {  getBillDetail,getPay  } from "@/api/system/bill";

  
  export default {
    name: "billsDetail",
    data() {
      return {
        payHtml:null,
        showDayChart: true,
        showMonChart: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 每日用电情况表格数据
        list:[],
        dayElecInfoList: [],
        dayElec:[],
        //每月用电情况表格数据
        monthElecInfoList: [],
        monthElec:[],
        monthElecYear:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          eUsage: null,
          eTime: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        },
        //账单表格
        paymentList: [],
        billDetail:[],
        month:[],
        // 账单状态
        ispaid: false,
        //用户id
        userId: null,
        //第一档用电量
        firstUsage: 0,
        //第二档用电量
        secondUsage: 0,
        //第三档用电量
        thirdUsage: 0,
        //用电量
        Usage: 0,
        //第一档金额
        firstAmount: 0,
        //第二档金额
        secondAmount: 0,
        //第三档金额
        thirdAmount: 0,
        //总金额
        totalAmount: 0,
      };
    },
    mounted() {
      this.getList();
      
    },

    methods: {
        getList() {
          this.loading = true;
          const billInfoId = this.$route.params.billInfoId;
          getBillDetail(billInfoId).then(response => {
          this.billDetail = response;
          this.billDetail.billDate = response.billDate.match(/^(\d{4}-\d{2})/)[0]; // 匹配'-'后跟随两个数字再跟随'-'的部分
          // this.paymentList = [this.billDetail];
          this.getPaymethod(response.payMethod);
          
          this.loading = false;
          this.getUsageAmount(this.billDetail.lastUsage, this.billDetail.nowUsage);
        });

      },
      getPaymethod(val) {
        if (val == 0) {
          this.billDetail.payMethod = "未支付";
      }else{
        this.billDetail.payMethod = "支付宝";
      }
    },
    //计算电量
    getUsageAmount(lastval,nowval) {
      this.Usage = nowval - lastval;
      if (this.Usage > 260) {
        this.thirdUsage = this.Usage-260;
        this.firstUsage = 180;
        this.secondUsage = 80;
      }else if (this.Usage > 180) {
        this.secondUsage = this.Usage-180;
        this.firstUsage = 180;
    }else {
      this.firstUsage = this.Usage;
    }
    //计算金额
    this.firstAmount = this.firstUsage * 0.56;
    this.secondAmount = this.secondUsage * 0.61;
    this.thirdAmount = this.thirdUsage * 0.86;
    this.totalAmount = this.firstAmount + this.secondAmount + this.thirdAmount;  
  },
  
  payMoney(){
        //获取支付页面
        getPay(this.$route.query.id).then((response)=>{
          window.open(response);
        // this.payHtml = response;
        // console.log(response);
      })
  }
    }};
  </script>
  <style scoped>
  .app-container{
    font-size: larger;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; 
    
  }
  .card{
    width: 80%; /* 示例宽度 */
    height: 60%; /* 示例高度 */
    border: 1px solid #ccc;
    padding: 20px;
    box-sizing: border-box; /* 确保padding不影响宽度 */
  }
  </style>
  